<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>实战前必须掌握的10个指令(下)</title>
    <script src="../js/lib/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--v-for 指令，来实现列表的渲染。-->
    <!--<div v-for="item in list">{{item}}</div>-->
    <div v-for="(item,index) in list">{{index}},{{item}}</div>
    <!-- v-on 指令相当于绑定事件的监听器。-->
    <button v-on:click="say('fesine')">say</button><br>
    <!--使用v-model进行数据绑定-->
    <input v-model="msg" type="text">
    <!--使用v-once只渲染一次-->
    <p v-once>{{msg}}</p>

</div>
<script>
    // 创建vm实例
    let vm = new Vue({
        //2、挂载元素
        el:"#app",
        //3、实例vm的数据
        data:{
            list:['fesine','soly','susie'],
            msg:"我只渲染了一次",
        },
        methods:{
            say(value){
                alert("say hello to "+value);
            }
        }
    });
</script>
</body>
</html>